<template>
  <a-card style="border-radius: 10px;max-width: 930px;box-shadow:4px 4px 8px #d3d2d2" :bordered="false">
    <template #title>
      <div style="font-size: 18px;color: #535353">
        <h2>分类 - {{categoryAndCount.length}}</h2>
      </div>
    </template>
<!--    <div v-for="(item,index) in categoryAndCount" :key="index" style="margin: -15px -15px 14px" >-->
<!--      <a-button type="text" block @click="handleClickCategory(item.category)">-->
<!--        <span style="float: left;color: #666666">{{ item.category }}</span>-->
<!--        <span style="float: right;color: #666666">{{ item.count }}</span></a-button>-->
<!--    </div>-->
    <el-tree  :data="treeData"  @node-click="handleNodeClick" default-expand-all :expand-on-click-node="false"/>

  </a-card>
</template>

<script setup>

import {useRouter} from "vue-router";
import {onMounted, reactive, ref} from "vue";
import {useStore} from "vuex";
import request from "@/utils/request";

const categoryAndCount=ref([])
const router=useRouter()
const store=useStore()
const treeData=reactive([])
const children=ref([])

const handleNodeClick = (data) => {
  console.log(data)
  if (data.children!==undefined)
    router.push("/visitor/getList/category/by/"+data.label.substring(0,data.label.indexOf(' - ')))
  else
    router.push("/visitor/getList/label/by/"+data.label.substring(0,data.label.indexOf(' - ')))
}

const toTheTreeData= (category,count)=>{
  request.get("label/get/bycategory/"+category).then(res=>{
    console.log(category," - Children  :",res.data)
    if (res.data!==null){
      res.data.forEach((value)=>{
        children.value.push({
          label:value.label+' - '+value.count,
        })
      })
    }
    // else {
    //   children.value=[]
    // }
    treeData.push({
      label:category+' - '+children.value.length,
      children:children.value
    })
    children.value=[]
    console.log("treeData  :",treeData)
  })
}

onMounted(()=>{
  categoryAndCount.value=store.getters.getCategoryList
  categoryAndCount.value.forEach((value)=>{
    toTheTreeData(value.category,value.count)
  })
})
</script>

<style scoped>

</style>